<template>
  <view
    class="single-select"
    :style="{
      '--item-width': `${props.itemWidth}rpx`,
      '--item-height': `${props.itemHeight}rpx`,
      '--item-border-width': `${props.borderWidth}rpx`,
      '--item-active-border': props.activeStyle.border,
    }"
  >
    <view
      v-for="(item) in options"
      :key="item.value"
      :class="['single-select__item', itemStyle(item)]"
      @click="select(item.value)"
    >
      <!-- 图片类型 -->
      <template v-if="item.type === 'image'">
        <!-- 有选中/未选中两张图片 -->
        <img
          v-if="item.selectedSrc && item.unselectedSrc"
          :src="currentValue === item.value ? item.selectedSrc : item.unselectedSrc"
          class="single-select__img"
        />
        <!-- 只有一张图片，选中时加边框 -->
        <img
          v-else
          :src="item.src"
          class="single-select__img"
        />
      </template>
      <!-- 颜色类型 -->
      <view
        v-else-if="item.type === 'color'"
        class="single-select__color"
        :style="{ background: item.color }"
      />
      <!-- 其他类型 -->
      <span v-else>{{ item.label }}</span>
    </view>
  </view>
</template>

<script setup>
import { ref, watch, computed } from 'vue'

const props = defineProps({
  options: Array,
  activeStyle: {
    type: Object,
    default: () => ({
      border: '4rpx solid #E5E6EB'
    })
  },
  inactiveStyle: {
    type: Object,
    default: () => ({
      border: '4rpx solid transparent'
    })
  },
  borderWidth: {
    type: Number,
    default: 4
  },
  itemWidth: {
    type: Number,
    default: 40
  },
  itemHeight: {
    type: Number,
    default: 40
  }
})

const emits = defineEmits(['change'])

const currentValue = ref(props.modelValue)
watch(() => props.modelValue, val => {
  currentValue.value = val
})

const select = (value) => {
  if (currentValue.value !== value) {
    currentValue.value = value
    emits('change', value)
  }
}

const itemStyle = (item) => {
  if (item.type === 'image' && (!item.selectedSrc || !item.unselectedSrc)) {
    // 只有一张图片时，选中加边框
    return currentValue.value === item.value
      ? 'single-select__item--active'
      : ''
  }
  if (item.type === 'color') {
    return currentValue.value === item.value ? 'single-select__item--active' : ''
  }
  return {}
}
</script>

<style lang="scss" scoped>
.single-select {
  --item-width: 40rpx;
  --item-height: 40rpx;
  --item-border-width: 4rpx;
  --item-active-border: 4rpx solid #E5E6EB;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .single-select__item {
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border 0.2s;
    border: var(--item-border-width) solid transparent;
  }
  .single-select__item--active {
    border: var(--item-active-border);
    border-width: var(--item-border-width);
  }
  .single-select__img {
    width: 40rpx;
    height: 40rpx;
    object-fit: cover;
    border-radius: 50%;
    width: var(--item-width);
    height: var(--item-width);
  }
  .single-select__color {
    width: var(--item-width);
    height: var(--item-width);
    border-radius: 50%;
  }
}
</style>
